<template>
	<view class="placeOrder" :class="resData.orderStatus!=1?'noBtn':''">
		<view class="t01">
			<view v-if="resData.orderStatus==1">
				<view>
					<image src="../../static/img/14.png" mode="widthFix"></image>
				</view>
				<view>等待买家付款</view>
			</view>
			<view v-else>自提码：{{resData.takeCode}}</view>


		</view>

		<view class="t1">
			<view class="t3">
				<view class="title">自取信息</view>
				<view class="item">
					<view>联系人</view>
					<view><text>{{contactName}}</text></view>
				</view>
				<view class="item">
					<view>联系电话</view>
					<view><text>{{contactPhone}}</text></view>
				</view>
				<view class="item">
					<view>
						自提时间
					</view>
					<view>
						<text>{{resData.confrimReceiveTime}}</text>

					</view>

				</view>
			</view>


		</view>
		<view class="t1">
			<view class="t3">
				<view>服务门店</view>
				<view>{{resData.storeName}}
					<image class="img11" @click="freeTell(resData.storePhone)" :src="imgUrl+'11.png'" mode="widthFix">
					</image>

				</view>
				<view class="img2" @click="openLocationFn(resData)">
					<image src="https://hongpei.oss-cn-hangzhou.aliyuncs.com/img/2.png" mode="widthFix"></image>
					{{resData.storeAddress}}
				</view>
			</view>


		</view>
		<view class="t4">
			<view class="t5">
				商品信息
			</view>
			<view class="t6">
				<view class="t7">
					<view>
						<image class="img1" :src="orderGoodsList.goodsImage"></image>
					</view>
					<view class="t8">
						<view>{{orderGoodsList.goodsTitle}}</view>
						<view>{{orderGoodsList.goodsPropery}}</view>
						<view>
							<image v-if="userInfo.cardNo" :src="imgUrl+'9.png'" mode="widthFix"></image>
							¥{{orderGoodsList.costPrice }}
							&nbsp;&nbsp;
							<text style="mmargin-left: 6upx;"> &nbsp; ¥ {{orderGoodsList.goodsPrice}}</text>
						</view>
						<view>X{{orderGoodsList.goodsQuantity}}</view>
					</view>
				</view>




			</view>

		</view>
		<view class="t9">
			<view>
				<view>
					产品小计
				</view>
				<view>
					<image class="img2" v-if="userInfo.cardNo" :src="imgUrl+'9.png'" mode="widthFix"></image>
					<text class="t10">¥{{resData.payMoney}}</text>
					<text class="t12" v-if="resData.orderMoney">¥{{resData.orderMoney}}</text>
				</view>

			</view>
			<view @click="goTo('/subpkg/my/coupon')">
				<view>
					优惠券
				</view>
				<view>
					<text :class="seletyhq?'t11':''">{{seletyhq||'优惠券'}}</text>

				</view>

			</view>
			<view>
				<view>
					减免
				</view>
				<view>
					{{resData.rebate||'无'}}
				</view>

			</view>
			<view>
				<view>
					实际支付
				</view>
				<view>
					¥{{resData.payMoney}}
				</view>

			</view>
		</view>

		<view class="t9 t09">


			<view>
				<view>
					<text>备注：{{resData.remark ||'无'}}</text>
				</view>


			</view>
		</view>


		<view class="btn" v-if="resData.orderStatus==1">
			<view class="b1">


			</view>
			<view class="b2" @click="CreateOrder(resData)">
				去付款
			</view>
		</view>
		<hTimeAlert v-if="isShow" title="选择时间" subhead="" rangeStartTime="10:00:00" rangeEndTime="20:00:00" defaultTime="2020/3/29 18:00:00" intervalTime="30"
			dayStartIntTime="0" rangeDay="7" :isShow="isShow" :maskHide="maskHide" :rangeType="rangeType" :closeBtn="closeBtn" @closeAlert="handelClose">
		</hTimeAlert>

	</view>
</template>

<script>
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";
	export default {
		data() {
			return {
				isShow: false,
				dateRange: "",
				maskHide: true,
				closeBtn: true,
				rangeType: true,
				imgUrl: this.imgUrl,
				obj: "",
				resData: "",
				orderDetail: "",
				contentList: [],
				contactPhone: "",
				contactName: "",
				remark: "",
				cardtype: 4,
				payCardNO: "",
				seletyhq: "",
				userInfo: "",
				orderGoodsList: {}
			}
		},
		components: {
			hTimeAlert
		},
		onLoad(e) {
			this.id = e.id
			this.OrderGetDetail(e.id)
			this.getMemberInfo()

		},
		methods: {
			getMemberInfo() {
				this.$http.GetMemberInfo({

				}).then(res => {
					if (res.code == 0) {
						this.userInfo = res.content;
					}

				})
			},
			openLocationFn(item) {
				uni.openLocation({
					// 传入你要去的纬度
					latitude: item.latitude,
					// 传入你要去的经度
					longitude: item.longitude,
					// 传入你要去的地址信息 不填则为空
					address: item.storeAddress,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					}
				})
			},
			freeTell(phone) {
				wx.makePhoneCall({
					phoneNumber: phone, //仅为示例，并非真实的电话号码
					success: function() {
						console.log("拨打电话成功！")
					},
					fail: function() {
						console.log("拨打电话失败！")
					}
				})
			},
			OrderGetDetail(id) {
				let self = this;

				this.$http.OrderGetDetail({
					orderCode: id
				}).then(res => {
					this.resData = res.content
					this.contactName = res.content.contactName
					this.contactPhone = res.content.contactPhone
					this.orderGoodsList = res.content.orderGoodsList[0]
					res.content.discountList.forEach(() => {
						self.seletyhq += e.discountCouponName + '、'
					})


					self.$http.GetDetails({
						storeId: res.content.storeId
					}).then(res2 => {
						self.resData['latitude'] = res2.content.latitude
						self.resData['longitude'] = res2.content.longitude

					})







				})
			},
			OrderPreview() {
				var goodsList = [{
					goodsBaseId: this.obj.goodsBaseId,
					goodsQuantity: this.obj.count * 1,
					goodsRelationId: this.obj.goodsRelationId,
					price: this.obj.price * 1,
					vipPrice: this.obj.costPrice * 1,
				}]
				this.$http.OrderPreview({
					goodsList: goodsList,
					storeId: this.obj.storeId,
					price: this.obj.price,
					vipPrice: this.obj.costPrice * 1,
					goodsQuantity: this.obj.count * 1,

				}).then(res => {
					this.orderDetail = res.content

				})
			},
			GetMyCard() {

				this.$http.GetMyCard({


				}).then(res => {
					this.contentList = res.content

				})
			},
			CreateOrder(e) {
				if (true) {

					var obj = {
						"orderCode": e.orderCode,
						"payMethod": e.payMethod,
						"id": e.id,
						"payCardNO": this.userInfo.cardNo
					}
					uni.showLoading({
						title: '支付中'
					})

					this.$http.OrderPayment(obj).then(res => {
						let payData = JSON.parse(res.content.paymentrequest)
						console.log(res)
						console.log(payData)
						uni.hideLoading()
						uni.requestPayment({
							provider: "wxpay",
							timeStamp: payData.timeStamp.toString(),
							nonceStr: payData.nonceStr,
							package: payData.package,
							signType: payData.signType,
							paySign: payData.paySign,
							success: res => {
								uni.showToast({
									title: '支付成功',
									icon: "none"
								})
								uni.hideLoading()
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									})
								}, 1000)
							},
							complete: res => {
								uni.hideLoading()

							}
						});

					})
				}

			},
			showMask() {
				this.isShow = true;
				console.log(this.isShow);
			},

			handelClose(data) {
				this.isShow = false;
				this.obj.takeTime = data.dateRange
				console.log(data);
			},

		}
	}
</script>

<style scoped lang="scss">
	.placeOrder {
		padding-bottom: 120upx;

		.t2 {
			font-size: 34upx;
			font-weight: 400;
			color: #222222;
		}

		.t01 {
			margin: 22upx 20upx;
			background: #FFFFFF;
			padding: 25upx 18upx;
			border-radius: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #BFB39B;
			text-align: center;

			image {
				margin: 0 auto;
				width: 64upx;
				height: 64upx;
			}
		}

		.t1 {
			margin: 22upx 20upx;
			background: #FFFFFF;
			padding: 25upx 18upx;
			border-radius: 10px;

			.t3 {
				font-size: 28upx;
				font-weight: 400;
				color: #222222;
				position: relative;


				.item {
					display: flex;
					justify-content: space-between;
					text {
						color: #999;
					}
				}

				>view:nth-child(1) {
					font-weight: bold;
				}

				.img11 {
					width: 40upx;
					height: 40upx;
					position: absolute;
					right: 20upx;
				}

				>view {
					display: flex;
					align-items: center;
					margin-bottom: 40upx;

					>view:nth-child(1) {
						width: 160upx;
					}
				}

				>view:last-child {
					margin-bottom: 0;
				}
			}


		}

		.t4 {
			background: #FFFFFF;
			border-radius: 10upx;
			margin: 22upx 20upx;
			padding: 24upx 20upx;

			.t5 {
				display: flex;
				align-items: center;
				font-size: 32upx;
				font-weight: 400;
				color: #222222;

				image {
					width: 20upx;
					height: 20upx;
					margin-left: 12upx;
				}
			}

			.t6 {
				.t7 {
					display: flex;
					margin-top: 26upx;
					width: 100%;

					.img1 {
						width: 120upx;
						height: 120upx;
						border-radius: 10upx;
						margin-right: 14upx;
					}

					.t8 {
						position: relative;
						width: 100%;

						>view:nth-child(1) {
							font-size: 28upx;
							font-weight: 400;
							color: #222222;
						}

						>view:nth-child(2) {
							font-size: 24upx;
							font-weight: 400;
							margin: 14upx 0;
							color: #888888;
						}

						>view:nth-child(3) {
							font-size: 24upx;
							font-weight: 400;
							color: #222222;

							image {
								width: 56upx;
								height: 27upx;
								margin-right: 10upx;
							}

							text {
								font-size: 20upx;
								font-weight: 400;
								color: #888888;
							}
						}

						>view:nth-child(4) {
							font-size: 20upx;
							font-weight: 400;
							color: #888888;
							right: 0;
							bottom: 50upx;
							position: absolute;
						}
					}
				}




			}


		}

		.t9 {
			background: #fff;
			margin: 20upx;
			padding: 24upx 20upx;
			border-radius: 10upx;

			>view {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24upx;
				font-weight: 400;
				color: #888888;
				margin-bottom: 26upx;



				text {
					font-size: 24upx;
					font-weight: 400;
					color: #888888;
				}

				.t12 {
					font-size: 20upx;
					font-weight: 400;
					color: #888888;
				}

				.img2 {
					width: 56upx;
					height: 27upx;
					margin-right: 12upx;
				}

				.img3 {
					width: 26upx;
					height: 26upx;
					margin-left: 6upx;
					vertical-align: middle;
					margin-top: -6upx;
				}

				.t10 {
					font-size: 24upx;
					font-weight: 400;
					color: #222222;
					margin-right: 8upx;
				}

				.t11 {
					font-size: 24upx;
					font-weight: 400;
					color: #BFB49B;
				}

			}

			>view:last-child {
				margin-bottom: 0;
			}
		}

		.t09 {
			>view {
				>view:nth-child(1) {
					font-size: 28upx;
					font-weight: 400;
					color: #222222;
				}
			}

			input {
				text-align: right;
			}
		}

		.t13 {
			font-size: 28upx;
			font-weight: 400;
			color: #222222;
			background: #fff;
			padding: 24upx 20upx;
			margin: 0 20upx;
			border-radius: 10upx;

			.t14 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 40upx;

				>view {
					display: flex;
					align-items: center;


				}

				>view:nth-child(1) {
					width: 400upx;
				}

				image {
					width: 40upx;
					height: 37upx;
					margin-right: 10upx;
				}

				.t014 {
					color: #888888;
				}


			}



			>view:last-child {
				margin-bottom: 0;
			}
		}

	}

	.btn {
		width: 99%;
		height: 98upx;
		background: rgba(255, 255, 255, 0.95);
		box-shadow: 0px -1px 8upx 0px rgba(211, 211, 211, 0.71);
		border-radius: 49upx;
		position: fixed;
		bottom: 0;
		margin: 0;
		left: 50%;
		margin-left: -370upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.b1 {
			padding-left: 33upx;
			font-size: 24upx;
			font-weight: 400;
			color: #888888;

			text {
				font-size: 42upx;
				font-weight: 400;
				color: #222222;
				margin: 0 10upx;
			}

			image {
				width: 20upx;
				height: 20upx;
			}

		}

		.b2 {
			width: 240upx;
			height: 80upx;
			line-height: 80upx;
			background: linear-gradient(135deg, #01AD65 10%, #1E7166 100%);
			border-radius: 100upx;
			font-size: 32upx;
			font-weight: 400;
			color: #F8F7F7;
			margin-right: 10upx;
		}
	}

	.img2 {
		color: #999;
		font-size: 24upx;

		image {
			width: 30upx;
			height: 30upx;
			margin-right: 10upx;
		}
	}

	.noBtn {
		padding-bottom: 10upx !important;
	}
</style>